<template>
  <home-block
    class="hot-casino"
    title="热门娱乐城"
    :leftWidth="300"
  >
    <div class="big-img" slot="left">
      <router-link :to="bigImg.url" v-if="bigImg.id">
        <img :src="bigImg.logo_img" />
      </router-link>
    </div>
    <div class="small-img" slot="right">
      <div
        v-for="(item, index) in imgList"
        :key="index"
      >
        <router-link :to="item[0].url">
          <img :src="item[0].logo_img" />
        </router-link>
        <router-link :to="item[1].url">
          <img :src="item[1].logo_img" />
        </router-link>
      </div>
    </div>
  </home-block>
</template>

<script>
import HomeBlock from './HomeBlock.vue';

export default {
  name: 'HomeHotCasino',
  props: {

  },
  components: {
    HomeBlock
  },
  data() {
    return {
      bigImg: {},
      smallImgList: [],
      list: []
    };
  },
  computed: {
    imgList() {
      if (!this.smallImgList.length) {
        return [];
      }
      const res = new Array(5);
      for (let i = 0; i < 10; i += 2) {
        res[i / 2] = this.smallImgList.slice(i, i + 2);
      }
      return res;
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$api.getIndexcerCompany()
        .then(data => {
          const [bigImg] = [data[0]];
          this.bigImg = bigImg;
          this.smallImgList = data.slice(1);
        });
    }
  }
};
</script>

<style lang="less" scoped>
  .big-img {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    img {
      width: 280px;
      height: 160px;
    }
  }
  .small-img {
    display: flex;
    justify-content: space-around;
    div {
      flex: 0 0 19%;
      img {
        width: 100%;
        height: 76px;
      }
      a:last-child img {
        margin-top: 4px;
      }
    }
  }
</style>
